<template>
    <div>
      <template v-for="item in jobListData" :key="item.rid">
        <JobList :jobData="item" @click="viewDetail(item.rid)"></JobList>
      </template>
      <!-- 分页栏 -->
      <div class="pagination">
        <el-pagination background :default-page-size="listCount" layout="prev, pager, next" :total="totalCount"
        @current-change="handleCurrentChange"  /> 
      </div>
    </div>
  </template>
  <script setup>
  import { inject, ref } from 'vue';
  import { useRouter } from 'vue-router';
  const $root = inject('$root')
  const $axios = inject('$axios')
  const router = useRouter()
  import JobList from '@/components/jobList.vue'
  //定义当前页
  let currentPage
  //定义总页数
  let totalPage
  //定义每页显示数据条数
  let listCount = 3
  //定义工作列表数据
  let jobListData = ref([])
  //定义总数据条数,默认0
  let totalCount = ref(0)
  //定义获取工作列表数据方法
  function getPageData(pageNo = 1) {
    $axios.get($root + `/recruit/?page=${pageNo}&page_size=${listCount}`)
      .then(r => {
        if (r.data.code == 200) {
            // console.log(r)
          totalCount.value = r.data.data.total_count
          jobListData.value = r.data.data.data
          totalPage = r.data.data.total_page
        }
      })
  }
  getPageData()
  //分页栏功能
  const handleCurrentChange = (e) => {
    if (currentPage <= 1 || currentPage >= totalPage) return
    getPageData(e)
  }
  //查看岗位详情
  const viewDetail = (rid) => {
    router.push('/jobDetail/' + rid)
  }
  </script>
  <style scoped>
  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 15px;
  }
  </style>